<template>
  <el-dialog :title="isAdd?'添加菜单':'编辑菜单'" :close-on-click-modal="false"
             :visible.sync="isShow" width="30%" @close="handleClose"
             :show-close="false">

    <el-form ref="form" :model="menu" label-position="right" label-width="80px">
      <el-form-item label="菜单类型">
        <el-radio-group v-model="menu.menuType">
          <el-radio-button label="0">目录</el-radio-button>
          <el-radio-button label="1">菜单</el-radio-button>
          <el-radio-button label="2">按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级ID">
        <el-select v-model="menu.parentId" placeholder="请选择父级菜单">
          <el-option v-for="item in allMenus" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="menu.label" placeholder="请输入菜单标签"></el-input>
      </el-form-item>
      <el-form-item label="路由名称" v-if="menu.menuType==1">
        <el-input v-model="menu.menuName" placeholder="请输入路由名称"></el-input>
      </el-form-item>
      <el-form-item label="路由路径" v-if="menu.menuType==1">
        <el-input v-model="menu.path" placeholder="请输入路由名称"></el-input>
      </el-form-item>
      <el-form-item label="组件" v-if="menu.menuType==1">
        <el-input v-model="menu.component" placeholder="请输入菜单组件"></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="menu.menuType!=2">
        <el-input v-model="menu.icon" placeholder="请输入菜单图标"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-input v-model="menu.perms" placeholder="请输入菜单权限"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {allMenus} from "@/api/system-menu";

export default {
  data() {
    return {
      allMenus: [],
      newMenu: this.menu
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    menu: {
      type: Object,
      default: {
        menuType: 2
      }
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    handleSubmit() {
      this.$emit('handleSubmit', this.menu)
    }
  },
  created() {
    allMenus().then(res => {
      this.allMenus = res
    }).catch(err => {
      this.$message.error('获取菜单列表失败')
    })
  }
}
</script>

<style scoped>

</style>
